<template>
  <div class="attentionBox">
    <header-box title="我的关注" :showLeft="true" :showRight="true"></header-box>
    <!-- 店铺推荐、猜你喜欢 -->
    <tab :class="topFixed?'sticky':''" class="guesstab" active-color="#ff6600" :custom-bar-width="getBarWidth">
      <tab-item selected @on-item-click="page=1">商品</tab-item>
      <tab-item @on-item-click="page=2">店铺</tab-item>
    </tab>
    <div v-if="page ==1" class="contentBox">
      <ul :class="topFixed?'sticky':''" class="screenBox clearfix">
        <li :class="currentTab==1?'active':''" class="screenItem" @click="screenClick(1)">全部</li>
        <li :class="currentTab==2?'active':''" class="screenItem" @click="screenClick(2)">降价</li>
        <li :class="currentTab==3?'active':''" class="screenItem" @click="screenClick(3)">促销</li>
        <li :class="currentTab==4?'active':''" class="screenItem" @click="screenClick(4)">订阅</li>
        <li :class="currentTab==5?'active':''" class="screenItem" @click="screenClick(5)">推荐</li>
      </ul>
      <div v-if="arr.length>=1" class="contBox">
        <div v-for="(item,index) in arr" :key="index" class="goodsList flex">
          <img :src="item.img" alt class="goodsImg" />
          <div class="introduce">
            <div class="title">{{item.title}}</div>
            <div class="price">¥{{item.money}}</div>
            <div class="footer flex_sb">
              <router-link to class="resemble">找相似</router-link>
              <div @click="starClick(item.collection)">
                <div
                  @click="item.collection=!item.collection"
                  class="starBox"
                  :class="item.collection==true?'active':''"
                >★</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="arr.length <=0" class="nodataBox">
        <img src="../assets/images/noSubscribe.492336d.png" alt />
        <p class="hintTitle">您暂时没有订阅喜欢的商品哦</p>
        <router-link to="/" class="stroll">去逛逛</router-link>
      </div>
      <!-- 好货推荐 -->
      <div class="recomend flex_center">
        <img src="../assets/images/guessTitle-icon.png" alt class="leftImg" />
        <span>为你推荐</span>
        <img src="../assets/images/guessTitle-icon2.png" alt class="rightImg" />
      </div>
      <div class="like">
        <ul class="likeUl clearfix">
          <li v-for="(item,index) in likeList" :key="index">
            <router-link class="linkBox" to="goodsInfo">
              <img :src="item.img" alt />
              <div class="content">
                <div class="title">{{item.title}}</div>
                <div class="tag flex">
                  <div
                    class="tagItem"
                    :class="item2=='自营'?'zy':''"
                    v-for="(item2,index2) in item.tags"
                    :key="index2"
                  >{{item2}}</div>
                </div>
                <div class="footer flex">
                  <div class="money">￥{{item.money}}</div>
                  <div class="evaluate">{{item.evaluate}}+评论</div>
                </div>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
      <divider style="padding: 20px;">好了没有更多了</divider>
    </div>
    <div v-else class="contentBox">2</div>
  </div>
</template>

<script>
import HeaderBox from '@/components/header'
import { Tab, TabItem, Divider } from 'vux'
const arrData = [
  {
    img: require('../assets/images/156939384936042029.jpg'),
    title:
      '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
    money: '499.00',
    collection: true
  },
  {
    img: require('../assets/images/157136450994431031.png'),
    title:
      '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
    money: '499.00',
    collection: true
  }
]
export default {
  components: {
    HeaderBox,
    Tab,
    TabItem,
    Divider
  },
  data() {
    return {
      topFixed: false,
      page: 1,
      currentTab: 1,
      arr: [],
      likeList: [
        {
          img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png'),
          title:
            '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
          tags: ['自营', '大聚惠'],
          money: '1548',
          evaluate: '100'
        },
        {
          img: require('../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png'),
          title: '飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒',
          tags: ['领券39-10'],
          money: '1499',
          evaluate: '100'
        },
        {
          img: require('../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png'),
          title: '飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒',
          tags: ['领券39-10'],
          money: '1499',
          evaluate: '100'
        },
        {
          img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png'),
          title:
            '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
          tags: ['自营', '大聚惠'],
          money: '1548',
          evaluate: '100'
        }
      ]
    }
  },
  mounted() {
    window.scrollTo(0, 0)
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#f2f2f2')
    document.addEventListener('scroll', e => {
      let Wheight = window.screen.height
      let top = e.srcElement.scrollingElement.scrollTop // 获取页面滚动高度
      if (Wheight - top <= 400) {
        this.topFixed = true
      } else {
        this.topFixed = false
      }
    })
  },
    beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    getBarWidth: function(index) {
      return 22 + 'px'
    },
    screenClick(index) {
      this.currentTab = index
      if (index == 1 || index == 4) {
        this.arr = arrData
      } else {
        this.arr = ''
      }
    },
    starClick(data) {
      if (data) {
        this.$vux.toast.show({
          width: '30%',
          type: 'text',
          text: '已关注'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.attentionBox {
  //  店铺推荐、猜你喜欢Tab
  /deep/.guesstab {
    background-color: #fff;
    padding-top: 80px;
    &.sticky {
        position: sticky;
        top: 0;
        z-index:3;

    }
    .vux-tab-container {
      height: 80px;
      line-height: 80px;
    }
    .vux-tab {
      margin: 0 100px;
      height: 80px;
      top: -20px;
      .vux-tab-item {
        background-size: 100% 0;
      }
    }
  }
  .contentBox {
    .screenBox {
      list-style: none;
      margin: 0;
      padding:20px 10px;
      background-color: #fff;
        &.sticky {
        position: sticky;
        top: 70px;
        z-index:3;
    }
      .screenItem {
        float: left;
        border-radius: 30px;
        width: 18.6%;
        text-align: center;
        height: 44px;
        line-height: 46px;
        border: 2px solid #eee;
        background-color: #eee;
        margin-right: 1%;

        &:last-child {
          margin-right: 0;
        }
        &.active {
          background-color: #fff;
          border: 2px solid #ff5500;
          color: #ff5500;
        }
      }
    }
    .nodataBox {
      text-align: center;
      img {
        width: 60%;
        margin-top: 50px;
      }
      .hintTitle {
        margin: 30px 0;
        font-size: 36px;
      }
      .stroll {
        color: currentColor;
        border-radius: 30px;
        padding: 10px 40px;
        border: 2px solid #777;
        background-color: #f8f9fa;
      }
    }
    .contBox {
      margin-top: 20px;
      padding: 20px;
      border-radius: 20px;
      .goodsList {
        margin-bottom: 20px;
        padding: 20px;
        background-color: #fff;
        border-radius: 20px;
        .goodsImg {
          width: 200px;
          height: 200px;
          flex-shrink: 0;
        }
        &:last-child {
          margin-bottom: 0;
        }
        .introduce {
          margin-left: 20px;
          flex-grow: 1;
          .title {
            font-size: 30px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 100px;
            overflow: hidden;
          }
          .price {
            margin-bottom: 10px;
            font-size: 36px;
            color: #ee3a0d;
          }
        }

        .footer {
          .resemble {
            border: 2px solid #000;
            padding: 0 10px;
            border-radius: 20px;
          }
          .starBox {
            color: rgb(165, 164, 164);
            font-size: 34px;
          }
          .starBox.active {
            color: #f55055;
          }
        }
      }
    }
    // 好货推荐
    .recomend {
      text-align: center;
      margin-top: 30px;
      img {
        width: 50px;
        height: 12px;
        padding-bottom: 6px;
      }
      .rightImg {
        transform: rotateY(180deg);
      }
      span {
        font-weight: bold;
        font-size: 30px;
        margin: 0 10px;
      }
    }
    .like {
      .likeUl {
        list-style: none;
        padding: 20px;
        li {
          float: left;
          width: 49%;
          border-radius: 20px;
          margin-right: 2%;
          margin-bottom: 20px;
          box-sizing: border-box;
          padding: 20px;
          background-color: #fff;

          .linkBox {
            color: currentColor;
          }
          img {
            width: 100%;
          }
          .content {
            .title {
              margin: 10px auto 0;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              white-space: normal;
            }
            .tag {
              margin: 10px 0;
              .tagItem {
                border: 2px solid #fb0;
                padding: 0 5px;
                border-radius: 10px;
                margin: 0 10px;
              }
              .zy {
                background-color: #fb0;
              }
            }
            .footer {
              .money {
                color: #f42;
                font-weight: bold;
                font-size: 30px;
              }
              .evaluate {
                color: #999;
                margin-left: 20px;
                font-size: 28px;
              }
            }
          }
        }
        li:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>